<template>
  <span class="i-layout-header-trigger i-layout-header-trigger-min">
    <Dropdown
      transfer-class-name="projectId"
      :trigger="isMobile ? 'click' : 'hover'"
      class="i-layout-header-user"
      :class="{ 'i-layout-header-user-mobile': isMobile }"
      @on-click="handleClick"
    >
      <span class="i-layout-header-user-name" v-if="!isMobile">{{
        projectName
      }}</span>
      <DropdownMenu slot="list">
        <DropdownItem
          style="height: 26px"
          :name="item.value"
          v-for="item in project"
          :key="item.value"
        >
          <span>{{ item.name }}</span>
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </span>
</template>
<script>
import { mapState, mapActions, mapGetters } from "vuex";
import store from "@/store/index";
import Setting from "@/setting";
import util from "@/libs/util";
import { GetMenus } from "@api/account";
import { projectindex } from "@api/projectsetting";
import { getHeaderName, getSiderSubmenu, getMenuSider } from "@/libs/system";
export default {
  name: "iHeaderProject",
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    ...mapGetters("admin/menu", ["getProject", "getCurrentProject"]),
  },
  data() {
    return {
      projectName: "请选择项目",
      baseUrl: Setting.apiBaseURL,
      ambient: null,
      project: [],
      projectId: "",
    };
  },
  watch: {
    getProject: function (newVal, oldVal) {
      this.setHeaderProjetc(newVal);
    },
  },
  mounted() {
    setTimeout(() => {
      this.setHeaderProjetc(this.getProject);
    });
  },
  methods: {
    ...mapActions("admin/page", ["closeAll"]),
    handleClick(name) {
      GetMenus({ project_id: name, is_change: 1 })
        .then((red) => {
          util.storage.set("menus", red.auth);
          const filterMenuSider = getMenuSider(
            red.auth.sider,
            red.project[0].value
          );
          util.storage.set("currentProject", name);
          util.storage.set("webcurrProject", name);
          let curr = this.project.find((item) => item.value === name);
          this.projectName = curr.name;
          setTimeout(() => {
            this.closeAll();
            this.$router.push(
              {
                name: red.auth.sider[0].path,
              },
              () => {}
            );
            window.location.reload();
          });
        })
        .catch((err) => {
          // console.log('err: ', err);
          // reject(err);
        });
    },
    setHeaderProjetc(project) {
      // console.log(project,'ppp')
      if (project.length > 0) {
        this.project = project;
        this.projectId = this.getCurrentProject;
        if (this.project && this.project.length > 0) {
          this.project.forEach((item) => {
            if (+item.value === +this.projectId) {
              this.projectName = item.name;
            }
          });
        }
      } else {
        this.project = util.storage.get("project");
        this.projectId = util.storage.get("currentProject");
        if (this.project && this.project.length > 0) {
          this.project.forEach((item) => {
            if (+item.value === +this.projectId) {
              this.projectName = item.name;
            }
          });
        }
      }
    },
  },
  // mounted () {
  //     setTimeout(() => {
  //         this.project = util.storage.get('project')
  //         this.projectId = util.storage.get('currentProject')
  //         // console.log(this.project, 'project')
  //         // console.log(this.projectId, 'id')
  //         if (this.project && this.project.length > 0) {
  //             this.project.forEach((item) => {
  //                 if (+item.value === +this.projectId) {
  //                     this.projectName = item.name;
  //                 }
  //             });
  //         }
  //     })
  // },
  // methods: {
  //     ...mapActions('admin/page', ['closeAll']),
  //     handleClick (name) {
  //         let curr = this.project.find((item) => item.name);
  //         util.storage.set('currentProject', curr.value);
  //         util.storage.set('webcurrProject', curr.value);
  //         this.projectName = curr.name;
  //         GetMenus({ project_id: curr.value }).then(red => {
  //             util.storage.set('menus', red.auth);
  //             const filterMenuSider = getMenuSider(
  //                 red.auth.sider,
  //                 red.project[0].value
  //             );
  //             setTimeout(() => {
  //                 this.closeAll()
  //                 this.$router.push({
  //                     name: red.auth.sider[0].path
  //                 }, () => {});
  //                 window.location.reload();
  //             })
  //         })
  //     }
  // }
};
</script>
<style lang="less" scoped>
/deep/.ivu-dropdown-item {
  height: 30px !important;
  line-height: 30px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/deep/.ivu-select-dropdown {
  /* overflow: auto !important; */
}
</style>
